<!DOCTYPE html>
<%@page import="com.tdcy.sys.util.BusiContextExt"%>
<%@page import="com.tdcy.sys.util.CodeTableUtils"%>
<%@page import="com.tdcy.framework.util.RequestUtils"%>
<%@page import="com.tdcy.sys.util.ParamUtils"%>
<%@page import="com.tdcy.framework.util.SessionUtils"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="biztag"%>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>配置管理中心</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<jsp:include page="../../hcommon.jsp"></jsp:include>
	<link rel="stylesheet" type="text/css" href="${path }/resource/js/ztree/css/ztree.css" />
	<link rel="stylesheet" type="text/css" href="${path }/resource/js/ztree/css/zTreeStyle.css" />
	<script src="${path }/resource/js/ztree/js/jquery.ztree.all-3.4.min.js" ></script>
	<script src="${path }/resource/js/ztree/js/jquery.ztree.exhide-3.4.min.js" ></script>
	<%
	    String appName = ParamUtils.getParamValue("application_name");
	%>
</head>
<style type="text/css">
#divFilter{clear: both;vertical-align: middle;text-align: center;}
#tvMenu{height: 400px}
#divTree{height: 480px;overflow-x: auto;overflow-y: scroll;text-align:left;white-space:nowrap;width:250px}
</style>


<body class="gray-bg skin-1">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>
						菜单管理</h5>
					</div>
					<div class="ibox-content">
					    <div>
					    	<div class="row">
								<div class="col-sm-3 col-md-3" >
									  <div id="divMenuTree" style="border:  1px solid #F5FAFC;width: 290px;overflow:auto">
		                                <ul id="tvMenu" class="ztree" >
		                                </ul>
		                              </div>
								</div>
								<div  class="col-sm-9 col-md-9">
									<form  id="menuform"  class="form-horizontal" role="form">  
								       <div class="form-group">   
								         <label class="col-sm-2 control-label">菜单名称:</label> 
								        <div class="col-sm-9">  
								            <input class="form-control" name="menuName"  id="menuName" datatype="*" nullmsg="不能为空"/>
								            <div class="Validform_checktip"></div>
								       </div>  
								       </div>   
								      <div class="form-group">   
								         <label class="col-sm-2 control-label">上级菜单：</label> 
								        <div class="col-sm-9">  
								       	 <div class="form-inline">
								            <input class="form-control" name="menuUpName"  id="menuUpName" readonly="true" style="width: 180px;height: 32px;"/>
											<input name="menuUpId" type="hidden" id="menuUpId" />
											<button class="btn btn-sm btn btn-sm btn-primary" id="btnUpOk" onclick="javascript:showUpMenu();return false;" ><span>选择</span></button>
											<div id="divUpMenu" style="display:none; height: 450px; overflow:auto;" align="center">
												<div style="height: 390px; overflow:auto;border: #d6d6dd 1px solid;;">
													<ul id="tvUp" class="ztree"></ul>
												</div>
											</div>
											</div>
								         </div>  
								       </div>  
								       <div class="form-group">   
								         <label class="col-sm-2 control-label">菜单类型：</label>
								        <div class="col-sm-10">  
								           <biztag:Comp-CodeRadio name="wxmenuType" code="wx_menu_type"/>
								         </div>  
								       </div> 
								       
								       <div id="clickDiv" style="display: none">
								       		<div class="form-group">   
									          <label class="col-sm-2 control-label">事件码：</label>
										        <div class="col-sm-10">  
										           <input class="form-control" name="key"  id="key" />
										         </div>  
									       </div> 
								       </div>
								       
								        <div id="media_idDiv" style="display: none">
								       		<div class="form-group">   
									          <label class="col-sm-2 control-label">素材选择：</label>
										        <div class="col-sm-10">  
										           <input class="form-control" name="mediaId"  id="mediaId" />
										         </div>  
									       </div> 
								       </div>
								       
								       <div id="viewDiv" style="display: none">
									       	 <div class="form-group">   
									          <label class="col-sm-2 control-label">菜单url：</label>
										        <div class="col-sm-10">  
										           <input class="form-control" name="url"  id="url" />
										         </div>  
									       </div> 
								       </div>
								     </form> 
								     <div style="text-align: center;margin-top: 2px;margin-bottom: 2px;">
										<button class="btn btn-sm btn btn-sm btn-primary" onclick="javascript:doAdd();" ><span>新增</span></button>
										<button class="btn btn-sm btn btn-sm btn-info"  onclick="javascript:doSave();" ><span>保存</span></button>
										<button class="btn btn-sm btn btn-sm btn-danger" onclick="javascript:doDel();" ><span>删除</span></button>
										<button class="btn btn-sm btn btn-sm btn-info"  onclick="javascript:doSyn();" ><span>同步</span></button>
									</div>
      								<div style="text-align: center;margin-top: 2px;margin-bottom: 2px;color:red">
      								tips:菜单保存仅仅保存在本地，记得同步微信服务器哟！
									</div>
								</div>
							</div>
						</div>
					</div>	
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript">
var appName  = "<%=ParamUtils.getParamValue("application_name")%>";
var menudata ;

var curMenuId; //当前选择的菜单id
var _menuTree;//当前菜单树对象
var curMenuInfo ;//当前选择的菜单信息

var NEWID = "-100";
var rootId = "0";

var reloadFlag = false; //加载树后是否需要重新加载curMenuId对应数据

var formValid = null;

var menuId = 1;
function getmenudata(){
	return menudata;
}

$(document).ready(function() {
	formValid = AppKit.formTipValidate("menuform");
	
	resetMenuSize();
	curMenuId = NEWID;
	
	getMenuTree();
	
	
	 $("input[name='wxmenuType']").click(function(){
		 var val =  $(this).val();
		 setMenuTypeClick(val);
	  });
});

function setMenuTypeClick(val){
	if(val == "view"){
		 $("#clickDiv").hide();
		 $("#media_idDiv").hide();
		 $("#viewDiv").show();
	 }else if(val == "click"){
		 $("#clickDiv").show();
		 $("#media_idDiv").hide();
		 $("#viewDiv").hide();
	 }else if(val == "media_id"){
		 $("#clickDiv").hide();
		 $("#media_idDiv").show();
		 $("#viewDiv").hide();
	 }else{
		 $("#clickDiv").show();
		 $("#media_idDiv").hide();
		 $("#viewDiv").hide();
	 }
}

 function resetMenuSize() {
     var winheight = $.browser.opera && $.browser.version > "9.5" ? document.documentElement["clientHeight"] : $(parent.window).height();
     $("#divMenuTree").height(winheight - 275);
 }
 
 function getMenuTree(){
	var url ="${path}/wxmenu/getMenu";
	AppKit.postJSON(url, null , showMenuTree);
}

function showMenuTree(json){
	if (!AppKit.checkJSONResult(json)) {
        return;
    }
	buildMenuTree(json.data);
}

function buildMenuTree(menuList){
	   console.log(menuList);
        var treedata = new Array();
       	var rootmenu = {"id":"0","pId":"","name":appName,"data":"", open:true, "iconSkin":"system"};
        treedata.push(rootmenu);
        
        var menu1Buttons  = menuList.menu.buttons;
    	for(var i=0;i<menu1Buttons.length;i++){
    		menuId++;
    		var menu1Id = menuId;
    		
    		var menu1 = menu1Buttons[i];
    		var tree = {"id":menu1Id,"pId":0,"name":menu1.name,"data":menu1,"iconSkin":"menu"};
    		treedata.push(tree);
    		
    		
    		if(menu1.subButtons){
    			for(var j=0;j<menu1.subButtons.length;j++){
    				menuId++;
    				var menu2Id = menuId;
    				var menu2 = menu1.subButtons[j];
    				var tree = {"id":menu2Id,"pId":menu1Id,"name":menu2.name,"data":menu2,"iconSkin":"menu"};
    	    		treedata.push(tree);
    			}
    		}
    		
    	}
    	
	    menudata= treedata;
	    
	    buildTreeByData();
}

function buildTreeByData(){
	//alert(AppKit.tostring(treedata));
    var setting = {
			view: {
				fontCss: getTreeFont,
				autoCancelSelected: false,
				selectedMulti: false,
				dblClickExpand: false,
				showLine: false
			},
			data: {
				simpleData: {
					enable: true,
					rootPId: rootId
				}
			},
			callback: {
				onClick: onTreeClick
			}
	};
    
    
	 $.fn.zTree.init($("#tvMenu"), setting, menudata);
     _menuTree = $.fn.zTree.getZTreeObj("tvMenu");
}

function getTreeFont(treeId, node) {
	return (!!node.highlight) ? {"background-color":"#ffff96"} : (node.font ? node.font : {"background-color":"transparent"});
}

function onTreeClick(event, treeId, treeNode, clickFlag) {
	if(treeNode.id == curMenuId){
		return;
	}
	
	setEmptyMenu();
	curMenuId = treeNode.id;
	if(treeNode.id == rootId){
		$('#menuform #menuUpName').val("");
        $('#menuform #menuUpId').val("");
        $('#menuform #menuName').val(appName);
		return ;
    }
	
	if(_menuTree){
		showMenuInfo(treeNode);
	}
}
 
 function showMenuInfo(treeNode){
	 console.log(treeNode);
    	var data = treeNode.data;
   	 $(' #menuName').val(data["name"]);
	$("#url").val(data["url"]);
	$("#key").val(data["key"]);
	$("#mediaId").val(data["mediaId"]);
   	 var pnode = treeNode.getParentNode();
   	 $('#menuform #menuUpName').val(pnode.name);
	 $('#menuform #menuUpId').val(pnode.id);
    $("input[name='wxmenuType'][value="+data["type"]+"]").attr("checked",true);
    setMenuTypeClick(data["type"]);
      //设置下拉菜单的值
      curMenuInfo = $('#menuform').serializeObject();
 }
 
 function showUpMenu() {
	 var url = "${path}/views/jsp/wxmgt/getMenu";
	 AppKit.openWindow(url,'选择上级菜单',400,450);
}

function selectMenu(menuId){
	curMenuId = menuId;
	var node = _menuTree.getNodeByParam("id", menuId, null);
	if(node){
		if(node.isParent){
			_menuTree.expandNode(node, true, false, true, false);	
		} else {
			_menuTree.expandNode(node.getParentNode(), true, false, true, false);
		}
		_menuTree.selectNode(node, false);
	}
}

function doSave() {
	var flag = formValid.check();
	if(!flag){
		return;
	}
	
	var menuinfo = $("#menuform").serializeObject();
	if(menuinfo == curMenuInfo){
		AppKit.showTipMessage("没有修改不要保存");
		return;
	}
	var upMenuId =  $('#menuform #menuUpId').val();
	var data =  {"name":$("#menuName").val(),"type":AppKit.getRadioValues("wxmenuType"),"url":$("#url").val(),"key":$("#key").val(),"mediaId":$("#mediaId").val()};
	if(curMenuId == NEWID){
		menuId++;
		console.log(data);
		
		//一级菜单不超过3个  二级菜单不超过5个
		var pNode = _menuTree.getNodeByParam("id",upMenuId);
		console.log(pNode);
		
		if(!upMenuId){
			AppKit.showTipMessage("上级菜单不能为空");
			return;
		}
		
		if(pNode.level == 0){
			if(pNode.children && pNode.children.length>=3){
				AppKit.showTipMessage("微信一级菜单不超过3个");
				return;
			}
		}else if(pNode.level == 1){
			if(pNode.children && pNode.children.length>=5){
				AppKit.showTipMessage("微信二级菜单不超过3个");
				return;
			}
		}else if(pNode.level == 2){
			AppKit.showTipMessage("微信菜单只支持两级");
			return;
		}
		
		var tree = {"id":menuId,"pId":upMenuId,"name":data["name"],"data":data,"iconSkin":"menu"};
		menudata.push(tree);
		buildTreeByData();
		
		selectMenu(menuId);
	}else{
		 for(var i=0;i<menudata.length;i++){
			 if(menudata[i].id == curMenuId){
				 menudata[i]["name"] = data["name"];
				 menudata[i]["data"] = data;
				 menudata[i]["pId"] = upMenuId;
			 }
		 }
		 buildTreeByData();
		 selectMenu(curMenuId);
		 
		 AppKit.showTipMessage("保存菜单到本地成功");
	}
}


function doAdd() {
	setEmptyMenu();
	console.log(curMenuId);
	var curNode = _menuTree.getNodeByParam("id",curMenuId);
	
	$('#menuform #menuUpName').val(curNode.name);
    $('#menuform #menuUpId').val(curNode.id);
    
	curMenuId = NEWID;
}

function setEmptyMenu(){
	$("#menuName").val("");
	$("#menuUpName").val("");
	$("#url").val("");
	$("#key").val("");
	$("#mediaId").val("");
}

function doDel() {
	if(curMenuId == NEWID ){
		AppKit.showTipMessage("请选择要删除的记录");
		return;
	}
	
	if(curMenuId == "0"){
		AppKit.showTipMessage("不能删除跟菜单");
		return;
	}
	 var treeNode = _menuTree.getNodeByParam("id", curMenuId, null);
	 var menudatanew = new Array();
	 for(var i=0;i<menudata.length;i++){
		 if(menudata[i].id == curMenuId){
			 
		 }else{
			 menudatanew.push(menudata[i]);
		 }
	 }
	 menudata = menudatanew;
	 buildTreeByData();
	 
	 selectMenu(treeNode.pId);
	 
	 AppKit.showTipMessage("删除本地菜单成功");
}

function doSyn(){
	var rootNode = _menuTree.getNodes();
	console.log(rootNode);
	var level1Nodes = rootNode[0].children;
	var formData = new Array();
	
	for(var i=0;i<level1Nodes.length;i++){
		var level1node = level1Nodes[i];
		console.log(level1node);
		var datas  = level1node.data;
		
		var level2Nodes = level1node.children;
		if(level2Nodes){
			var subButton = new Array();
			for(var j=0;j<level2Nodes.length;j++){
				var level2node = level2Nodes[j];
				subButton.push(level2node.data);
			}
			console.log(subButton);
			datas.subButtons = subButton;
		}
		
		formData.push(datas);
	}
	
	console.log(formData);
	var url = "${path}/wxmenu/createMenu"
	var menuStr= AppKit.tostring(formData);
	
	AppKit.postJSON(url,{"menuStr":menuStr}, function(json){
		  if(!AppKit.checkJSONResult(json)){
			    return;
		    }
		    
		    AppKit.showTipMessage(json.message);
	});
}
</script>
</body>
</html>
